<!DOCTYPE html>
<html>

<head lang="en">
    <title>找攻略</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/js/plugins/comments-master/css/index.css">
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
    <link rel="stylesheet" href="/css/strategyComment.css"/>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <link rel="stylesheet" href="/js/plugins/jquery-confirm/css/jquery-confirm.css">
    <script src="/js/plugins/jquery-confirm/js/jquery-confirm.js"></script>
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script>
        $(function () {
            //获取地址上的点评id
            var id = getParams().id;

            //拿到当前登录的用户，要求必须登录之后才能评论
            var currentuser ;
            currentuser = JSON.parse(sessionStorage.getItem("user"));

            var commmentmodel ;
            //给评论按钮绑定点击事件
            $("#commentBtn").click(function () {
                if(!currentuser){
                    alert("想要评论的话，请先登录");
                    var message = confirm("点击确定跳转到登录界面");
                    if(message){
                        window.location.href = "/login.html" ;
                    }else{
                        return ;
                    }
                }
                //将删除了的评论模态窗拼回来
                $(".comment").append(commmentmodel);
            })

            //===================================================================
            //下面是评论窗口的js代码
            $(".btn_send").on('click',function(){
                var now = time();
                //获取评论信息
                var text_send = $("#text_send").val();
                if(text_send == ""){
                    return false;
                }
                var html;
                //拿到当前登录评论的用户id，还有所评论的事物的id,发送一个post请求
                //当我评论的时候，就拿到当前评论的用户和评论的事物的id，还有当前的时间，发送一个ajax请求
                $.ajax({
                    url:"/comments",
                    type:"POST",
                    data:{
                        'user.id':currentuser.id,
                        'travel.id':0,//麻蛋，逼着我传值
                        'strategyComment.id':id,
                        'daily.id':0,//麻蛋，逼着我传值
                        'comment.id':0,//麻蛋，逼着我传值
                        creatTime:now,
                        content:text_send,
                        commenttype:2//评论攻略点评的
                    },
                    success:function (data) {
                        if(data.success){
                            html = '<div class="col-md-12 col-sm-12 col-xl-12 one cont">'+
                                '<div class="col-md-2 col-sm-2 col-xl-12 one img">'+
                                '<img  id="commentimg" src="'+currentuser.headImgUrl+'">'+'<p class="tent">'+currentuser.nickName+'</p>'+
                                '</div>'+
                                '<div class="col-md-10 col-sm-10 csm-xl-12 one content">'+
                                '<div class="comment-right">'+

                                '<div class="comment-content-header three">'+
                                '<span><i class="glyphicon glyphicon-time two"></i>'+now+'</span>&nbsp;&nbsp;&nbsp;&nbsp;'+
                                '<span><i class="glyphicon glyphicon-map-marker two"></i>'+currentuser.place+'</span>'+
                                '</div>'+
                                '<p class="tent">'+text_send+'</p>'+
                                '<div class="reply-list three">'+

                                '</div>'+
                                '<div class="col-md-12 col-sm-12 col-xl-12 content_text one three">'+
                                '<textarea class="col-md-10 col-sm-10 col-xl-10 con_back" id="con_back"></textarea>'+
                                '<div class="col-md-2 col-sm-2 col-xs-2 btn btn_back" data-fid="'+data.data.id+'">评论</div>'+
                                '</div>'+
                                '</div>'+
                                '</div>';
                            $(".tent_info").append(html);
                            $(".text_send").val("");

                            //这个是给生成的评论框的按钮绑定点击事件的
                            $(".tent_info").on('click','.btn_back',function(){
                                var back_time = time();
                                //获取评论信息
                                var con_back = $(this).parent().parent().parent().find("#con_back").val();
                                if(con_back == ""){
                                    return false;
                                }
                                //如果有内容的话就发送ajax请求，往评论表里面添加内容
                                $.ajax({
                                    url:"/comments",
                                    type:"POST",
                                    data:{
                                        'user.id':currentuser.id,
                                        'travel.id':0,//麻蛋，逼着我传值
                                        'strategyComment.id':0,//麻蛋，逼着我传值
                                        'daily.id':0,//麻蛋，逼着我传值
                                        'comment.id':$(this).data("fid"),
                                        creatTime:back_time,
                                        content:con_back,
                                        commenttype:4//评论评论的
                                    }
                                })

                                var html_back;
                                html_back = '<div class="reply">'+
                                    '<div class="three">'+
                                    '<a class="replyname">'+currentuser.nickName+'</a>:<span >'+back_time+'</span><span>'+currentuser.place+'</span>'+
                                    '</div>'+
                                    '</div>'+
                                    '<p><span>'+con_back+'</span></p>';
                                $(this).parent().parent().parent().find(".reply-list").append(html_back);
                                $(this).parent().parent().parent().find("#con_back").val("");
                            })
                            alert("评论成功，获得1积分");
                            window.location.reload();
                        }
                    }
                })
            })

            $(".content_text").show();

            var currentPage = 1 ;
            var pages ;

            //页面加载完之后获取所有的评论，拼接在游记的下面
            $.get("/strategycomments/"+id+"/comments",function (data) {
                pages = data.pages ;//拿到总页数
                $.each(data.list,function (index, ele) {
                    //渲染所有的评论
                    var comment = dataModal(ele);
                    //将这一块div拼在游记的下面
                    $("body").append(comment);
                    setTimeout(function () {
                        $.each(ele.comments,function (index, cle) {
                            var childcomment;
                            childcomment = '<div class="reply">'+
                                '<div class="three">'+
                                '<a class="replyname">'+cle.user.nickName+'</a>:<span >'+cle.creatTimeMsg+'</span><span>'+currentuser.place+'</span>'+
                                '</div>'+
                                '</div>'+
                                '<p><span>'+cle.content+'</span></p>';

                            $(".prentdiv"+ele.id+"").find(".reply-list").append(childcomment);
                        })
                    },10)
                })
                //这个是使得渲染回来的那些评论生效的
                childModal();
            })

            //评论的分页
            //设置窗口的滚动事件，用于翻页
            $(window).scroll(function () {
                if(isEnd()){
                    if(currentPage < pages){
                        //如果没有到达底部的话，就当前页自增之后，发送get请求，获取第二页的数据
                        currentPage ++ ;
                        $.get("/strategycomments/"+id+"/comments",{currentPage:currentPage},function (data) {
                            $.each(data.list,function (index, ele) {
                                //渲染分页回来的评论
                                var comment = dataModal(ele);
                                //将这一块div拼在游记的下面
                                $("body").append(comment);

                                //分页回来的数据中，拼接子评论
                                setTimeout(function () {
                                    $.each(ele.comments,function (index, cle) {
                                        var childcomment;
                                        childcomment = '<div class="reply">'+
                                            '<div class="three">'+
                                            '<a class="replyname">'+cle.user.nickName+'</a>:<span >'+cle.creatTimeMsg+'</span><span>'+currentuser.place+'</span>'+
                                            '</div>'+
                                            '</div>'+
                                            '<p><span>'+cle.content+'</span></p>';

                                        $(".prentdiv"+ele.id+"").find(".reply-list").append(childcomment);
                                    })
                                },10)
                            })
                            childModal();//使得回来的评论有点击事件
                        })
                    }else{
                        //如果滚动到了底部就给个友好的提示，使用dialog这个插件进行有好的提示
                        $(document).dialog({
                            type : 'notice',
                            infoText: "已经到底了，兄地,再滚就穿了",
                            autoClose: 1500,
                            position: 'bottom'  // center: 居中; bottom: 底部
                        });
                    }
                }
            })

            //页面加载完就删除掉评论框的模块
            commmentmodel = $("#commentModel").detach();
            //作者的id
            var authorId;
            //获取点评信息
            $.get("/strategys/comment/" + id, function (data) {
                console.log(data);
                authorId=data.author.id;
                //查询用户是否已经被登录的用户关注
                $.get("/users/" + authorId + "/isConcern", function (data) {
                    if (!data) {
                        $(".watchBtn").attr("disabled", "disabled").val("已关注");
                    }
                })
                $(".comment").renderValues(data, {
                    starHandle: function (ele, value) {
                        var num = 0;
                        while (num < value) {
                            $(ele).append('<i class="fa fa-star"></i>');
                            num++;
                        }
                        while (num < 5) {
                            $(ele).append('<i class="fa fa-star-o"></i>');
                            num++;
                        }
                    }, userHandler: function (ele, value) {
                        ele.href = "/userProfiles.html?id=" + value;
                    }, strategyHandler: function (ele, value) {
                        ele.href = "/strategyCatalogs.html?strategyId=" + value;
                    }
                });
            })
            //用户关注按钮实现
            $(".watchBtn").click(function () {
                $.post("/users/" + authorId + "/concern", function (data) {
                    if (data.success) {
                        console.log(data);
                        //刷新页面更新数据
                        location.reload()
                    } else {
                        alert(data.msg);
                    }
                });

            })


            //给like按钮绑定点击事件
            $("#likeBtn").click(function () {
                //发送ajax请求，一个post请求
                $.ajax({
                    url:"/praises",
                    type:"POST",
                    data:{
                        'user.id':currentuser.id,
                        'strategycomment.id':id
                    },
                    success:function (data) {
                        alert(data.msg);
                        window.location.reload();
                    }
                })
            })

            //发送一个get请求，获取这个点评下面的所有评论的总数
            $.get("/strategycomments/"+id+"/comments/total",function (data) {
                //拿到返回的数据就渲染在html中
                $("#commentTotal").html(data);
            })
            //发送一个get请求，获取这个点评下面的所有赞的总数
            $.get("/strategycomments/"+id+"/praise/total",function (data) {
                //拿到返回的数据就渲染在html中
                $("#likeTotal").html(data);
            })

            //使得渲染回来的评论具有动态的点击事件
            function childModal() {
                $(".content_text").on('click','.renderBtn',function(){
                    var back_time = time()

                    var commentId = $(this).data("id");//拿到到当前被评论的id

                    //获取评论信息
                    var con_back = $(this).parent().parent().parent().find("#con_back").val();
                    if(con_back == ""){
                        return false;
                    }
                    //如果有内容的话就发送ajax请求，往评论表里面添加内容
                    $.ajax({
                        url:"/comments",
                        type:"POST",
                        data:{
                            'user.id':currentuser.id,
                            'travel.id':0,//麻蛋，逼着我传值
                            'strategyComment.id':0,//麻蛋，逼着我传值
                            'daily.id':0,//麻蛋，逼着我传值
                            'comment.id':commentId,
                            creatTime:back_time,
                            content:con_back,
                            commenttype:4//评论评论的
                        }
                    })
                    var html_back;
                    html_back = '<div class="reply">'+
                        '<div class="three">'+
                        '<a class="replyname">'+currentuser.nickName+'</a>:<span >'+back_time+'</span><span>'+currentuser.place+'</span>'+
                        '</div>'+
                        '</div>'+
                        '<p><span>'+con_back+'</span></p>';
                    $(this).parent().parent().parent().find(".reply-list").append(html_back);
                    $(this).parent().parent().parent().find("#con_back").val("");
                })
            }
        })
        //返回一个已经渲染好的div
        function dataModal(ele) {
            return '<div class="col-md-12 col-sm-12 col-xl-12 one cont prentdiv'+ele.id+'">'+
                '<div class="col-md-2 col-sm-2 col-xl-12 one img">'+
                '<img  id="commentimg" src="'+ele.user.headImgUrl+'">'+'<p class="tent">'+ele.user.nickName+'</p>'+
                '</div>'+
                '<div class="col-md-10 col-sm-10 csm-xl-12 one content">'+
                '<div class="comment-right">'+

                '<div class="comment-content-header three">'+
                '<span><i class="glyphicon glyphicon-time two"></i>'+ele.creatTimeMsg+'</span>&nbsp;&nbsp;&nbsp;&nbsp;'+
                '<span><i class="glyphicon glyphicon-map-marker two"></i>'+ele.user.place+'</span>'+
                '</div>'+
                '<p class="tent">'+ele.content+'</p>'+
                '<div class="reply-list three">'+

                '</div>'+
                '<div class="col-md-12 col-sm-12 col-xl-12 content_text one three">'+
                '<textarea class="col-md-10 col-sm-10 col-xl-10 con_back" id="con_back"></textarea>'+
                '<div class="col-md-2 col-sm-2 col-xs-2 btn renderBtn" data-id="'+ele.id+'">评论</div>'+
                '</div>'+
                '</div>'+
                '</div>';
        }


        function isEnd() {
            //返回true或者false
            return $(window).height() + $(window).scrollTop() >= $(document).height();
        }
        //定义了一个获取当前评论时间的js
        function time(){
            function time(s) {
                return s < 10 ? '0' + s: s;
            }
            var myDate = new Date();
            //获取当前年
            var year=myDate.getFullYear();
            //获取当前月
            var month=myDate.getMonth()+1;
            //获取当前日
            var date=myDate.getDate();
            var h=myDate.getHours();       //获取当前小时数(0-23)
            var m=myDate.getMinutes();     //获取当前分钟数(0-59)
            var s=myDate.getSeconds();
            return year+'-'+time(month)+"-"+time(date)+" "+time(h)+':'+time(m)+":"+time(s);
        }
    </script>

</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>点评详情</span>
        </div>
        <div class="col"></div>
    </div>
</div>

<div class="comment">


    <div class="container ">
        <div class="row">
            <div class="col-2">
                <a data-id="43" render-key="author.id" render-fun="userHandler">
                    <img class="rounded-circle" render-src="author.headImgUrl" style="width: 60px">
                </a>
            </div>
            <div class="col">
                <span class="comment-star" render-key="grade" render-fun="starHandle"></span>


                <span class="comment-date" render-html="createDate"></span>
                <small>
                    <input class="btn watchBtn" style="width:70px;height:40px" type="button"
                                   value="关注"/>
                </small>
                <div class="comment-content">
                    <p render-html="content"></p>
                </div>
                <ul class="comment-img" render-loop="images">
                    <li>
                        <img render-src="images.imageUrl">
                    </li>
                </ul>

                <div class="comment-link">
                    <a data-id="2" render-key="strategy.id" render-fun="strategyHandler">
                        <img render-src="strategy.coverUrl"> <span render-html="strategy.title"></span>
                        <i class="fa fa-angle-right fa-2x"></i>
                    </a>
                </div>

            </div>
        </div>
    </div>

    <div class="count d-flex justify-content-between">
        <div class="p-2" id="commentBtn">评论<span id="commentTotal">0</span></div>
        <div class="p-2" id="likeBtn">赞<span id="likeTotal">0</span></div>
    </div>

</div>
<section class="tent_info col-xs-5" id="commentModel">
    <div  style="margin-bottom: 20px" class="col-xs-5 textarea one">
        <textarea class="text_send" id="text_send"></textarea>
        <div class="col-xs-12 btn btn_send">评论</div>
    </div>
</section>



</body>

</html>